import React from 'react';
import { View, Text } from '@tarojs/components';
import './index.less';

export interface CommonModalProps {
  /** 是否显示 */
  visible: boolean;
  /** 标题，未传则隐藏头部 */
  title?: string;
  /** 弹窗内部自定义内容 */
  content?: React.ReactNode;
  /** 确认按钮文字 */
  okText: string;
  /** 确认按钮点击事件 */
  okClick: () => void;
  /** 取消按钮文字，未传则只有一个确认按钮 */
  cancelText?: string;
  /** 取消按钮点击事件 */
  cancelClick?: () => void;
  /** 其他按钮文字，传了就显示三按钮 不是三个按钮的弹窗不要传这个字段，否则默认三按钮样式 */
  otherText?: string;
  /** 其他按钮点击事件 */
  otherClick?: () => void;
  /** 额外 class，用于覆盖容器宽度、圆角等样式 */
  className?: any;
}

export default function CommonModal({
  visible,
  title,
  content,
  okText,
  okClick,
  cancelText,
  cancelClick,
  otherText,
  otherClick,
  className,
}: CommonModalProps) {
  if (!visible) return null;
  const hasTitle = Boolean(title);
  const hasContent = content !== undefined && content !== null;
  const btnCount = otherText ? 3 : cancelText ? 2 : 1;
  const footerCls = ['cm-footer', `cm-${btnCount}`, className]
    .filter(Boolean)
    .join(' ');
  const wrapperCls = [
    'cm-wrapper',
    className,
    hasTitle ? 'has-title' : 'no-title',
    hasContent ? 'has-content' : 'no-content',
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <View className="cm-overlay">
      <View className={wrapperCls} onClick={(e) => e.stopPropagation()}>
        {hasTitle && (
          <View className="cm-header">
            <Text className="cm-title">{title}</Text>
          </View>
        )}
        {hasContent && (
          <View className="cm-body">
            {typeof content === 'string' ? (
              <Text className="cm-body-text">{content}</Text>
            ) : (
              content
            )}
          </View>
        )}
        {otherText ? (
          <View className={footerCls}>
            {okText && (
              <View className="cm-btn cm-ok" onClick={okClick}>
                <Text className="cm-btn-text cm-ok-text">{okText}</Text>
              </View>
            )}
            {cancelText && (
              <View className="cm-btn cm-cancel" onClick={cancelClick}>
                <Text className="cm-btn-text">{cancelText}</Text>
              </View>
            )}
            <View className="cm-btn cm-other" onClick={otherClick}>
              <Text className="cm-btn-text">{otherText}</Text>
            </View>
          </View>
        ) : (
          <View className={footerCls}>
            {cancelText && (
              <View className="cm-btn cm-cancel" onClick={cancelClick}>
                <Text className="cm-btn-text">{cancelText}</Text>
              </View>
            )}
            {okText && (
              <View className="cm-btn cm-ok" onClick={okClick}>
                <Text className="cm-btn-text cm-ok-text">{okText}</Text>
              </View>
            )}
          </View>
        )}
      </View>
    </View>
  );
}
